{% extends 'base.html' %}
{% block head-ext %}
	<link rel="stylesheet" href="/static/css/chat_room.css" media="screen" type="text/css" />
{% endblock %}

{% block bd-body %}
	<div class="chat-container">
		<div class="left-contact-panel">
			<!-- Nav tabs -->
			<ul class="nav nav-tabs" role="tablist">
				<li role="presentation" class="active">
					<a href="#contact-tab" role="tab" data-toggle="tab">
						好友
					</a>
				</li>
				<li role="presentation">
					<a href="#group-tab" role="tab" data-toggle="tab">
						群组
					</a>
				</li>
			</ul>
			<!-- Tab panes -->
			<div class="tab-content">
				<div role="tabpanel" class="tab-pane active" id="contact-tab">
					<ul class="list-group">
						{% for friend in request.user.userprofile.friends.select_related %}
						<li contact-type="single" contact-id="{{ friend.id }}" onclick="OpenChatWindow(this)" class="list-group-item">
							<span class="badge hide"></span>
							<span class="contact-name">{{ friend.name }}</span>
						</li>
						{% endfor %}
					</ul>
				</div>
				<div role="tabpanel" class="tab-pane" id="group-tab">
					群组
				</div>
			</div>
		</div>
		<div class="right-chat-panel">
			<div class="chat-box-title" contact-type="" contact-id=""></div>
			<div class="chat-box-window"></div>
			<div class="chat-box-emoj">emoj</div>
			<div class="chat-box-msg-box">
				<textarea id="msg"></textarea>
				<button class="btn btn-success">发送消息</button>
			</div>
		</div>
	</div>
{% endblock %}

{% block bd-footer %}
{% endblock %}

{% block bd-js %}
	<script src="/static/plugin/jquery-1.11.3/jquery.min.js" type="text/javascript"></script>
	<script src="/static/plugin/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript"></script>
	<script src="/static/js/chat_room.js" type="text/javascript"></script>
{% endblock %}